<template>
	<view>
		<!--检索-->
		<view class="search flex-row">
			<u-search  input-align="center" style="width: 100%;"  @custom="custom" height="70" v-model="params.articleTitle"></u-search>
			<!-- <uni-icons class="icon" type="search" size="16" color="#777"></uni-icons>
			<input @input="listenInput" class="input" type="text" value="" placeholder="请输入关键词" />
			<view class="btn flex-column">检索</view> -->
		</view>
		<!--列表-->
		<scroll-view v-if="articleList.length == 0" class="body" scroll-y>

			<view class="card">

				<view class="history flex-flow">
					<view v-for="(item, index) in historyList" :key="index" @click="historySearch(item.searchText)"
						class="item flex-column text-ellipsis">
						{{item.searchText}}
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view v-if="articleList.length > 0"  class="body" scroll-y>
			<view :articleInfo="item" v-for="(item, index) in articleList" :key="index">
				<view class="searchitem" @click="gotoDetail(item)">
					<view class="text-ellipsis">{{item.articleTitle}}</view>
				</view>
				<u-line class="u-line"></u-line>
			</view>
			<!-- <card :articleInfo="item" v-for="(item, index) in articleList" :key="index"></card> -->
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				query: {
					keywords: ''
				},
				params: {
					articleTitle: '',
					categoryId: '',
				},
				timer: null, //延时器 
				articleList: [], //文章列表
				articleType: '',
				historyList: [],
			}
		},
		onLoad(option) {
			this.articleType = option.articleType == undefined ? "" : option.articleType
			// this.historyList = uni.getStorageSync("historyList");
			// if (this.$u.test.isEmpty(this.historyList)) {
			// 	this.historyList = [];
			// }
			this.$u.api.getWindSearchs()
				.then(res => {
					console.log(JSON.stringify(res));
					this.historyList = res.rows;
					if (this.historyList.length > 0) {
						this.params.articleTitle = this.historyList[0].searchText;
					}

				});
		},
		methods: {
			custom(value) {
				this.params.articleTitle = value;
				this.params.categoryId = this.articleType;
				this.listArticleInfo();
				this.$u.api.windSearch({
						search: value
					})
					.then(res => {
						this.$u.api.getWindSearchs()
							.then(res => {
								console.log(JSON.stringify(res));
								this.historyList = res.rows;
							});
					});
			},
			windSearch() {

			},
			gotoDetail(item) {
				uni.navigateTo({
					url: '/subpackage/industry_dynamic_detail/industry_dynamic_detail?articleId=' + item.articleId
				})
			},
			historySearch(title) {

				this.params.articleTitle = title;
				this.listArticleInfo();
				this.$u.api.windSearch({
						search: title
					})
					.then(res => {
						this.$u.api.getWindSearchs()
							.then(res => {
								console.log(JSON.stringify(res));
								this.historyList = res.rows;
							});
					});
			},
			// 获取内容 列表
			listArticleInfo() {
				if (this.params.articleTitle === '') {
					this.articleList = [];
					this.query.keywords = ''
					return
				}
				this.$u.api.article.articleTypeList(this.params)
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.query.keywords = this.params.articleTitle
						console.log("搜索数据", JSON.stringify(res));
						console.log("搜索数据条数", res.rows.length);
						if (res.rows.length > 0) {
							console.log("搜索数据条数》》》0");
							this.articleList = res.rows
							this.query.keywords = this.params.articleTitle
						} else {
							console.log("搜索数据条数00000");
							this.articleList = [];
							this.$u.toast('没有数据');
							this.query.keywords = ''
						}
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/*列表*/
	.body {
		background-color: #FFF;
		height: calc(100vh - 100rpx);

		.searchitem {
			display: flex;
			align-items: center;

			height: 60rpx;
			line-height: 60rpx;
			padding-left: 30rpx;
			margin-right: 30rpx;
		}
	}

	/* #ifdef H5 */
	.container1 {
		height: calc(100vh - 44px - 50px - var(--status-bar-height));
		min-height: initial;
	}

	.body2 {
		height: calc(100vh - 100rpx - 44px - 50px - var(--status-bar-height));
	}

	/* #endif */

	.card {
		padding: 30rpx 30rpx 0;
		.title {
			margin-bottom: 30rpx;
			.text {
				font-size: 32rpx;
			}
		}
		/*列表*/
		.list {
			.item {
				margin-bottom: 20rpx;
				&:nth-child(1) {

					.name,
					.views {
						color: red;
					}
				}

				&:nth-child(2) {

					.name,
					.views {
						color: #FF5500;
					}
				}

				&:nth-child(3) {

					.name,
					.views {
						color: green;
					}
				}

				.name {
					width: calc(100% - 200rpx);
				}

				.views {
					color: #777;
				}
			}
		}

		/*历史搜索*/
		.history {
			.item {
				color: #777;
				height: 60rpx;
				width: calc(25% - 20rpx);
				border-radius: 40rpx;
				margin: 0 10rpx 30rpx;
				background-color: #F5F5F5;
			}
		}
	}

	/*检索区域*/
	.search {

		height: 100rpx;
		padding: 0 30rpx;
		position: relative;

		.icon {
			position: absolute;
			top: 30rpx;
			left: 60rpx;
		}

		.input {

			width: 100%;
			height: 72rpx;
			font-size: 28rpx;
			border-radius: 60rpx;
			background-color: #F2F2F2;
			padding: 0 30rpx 0 80rpx;
			transition: width 0.2s ease;
		}

		.btn {
			color: #FFF;
			width: 0;
			opacity: 0;
			height: 72rpx;
			border-radius: 40rpx;
			background-color: #FF5500;
			transition: all 0.2s ease;
		}

		&.input {
			.input {
				width: calc(100% - 140rpx);
			}

			.btn {
				opacity: 1;
				width: 120rpx;
			}
		}
	}
</style>
